import React from 'react';
import {connect} from 'dva'
import moment from 'moment'

import Tools from 'utils/tools'
import Chart from 'components/Chart'
import CustomSelect from 'components/CustomSelect'
import SelectTime2 from 'components/TabEcharts/SelectTime2'

import { Modal } from 'antd';

const format = 'YYYY';
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const time = moment(now).format(format)
const timeUnit = '年'

@connect(({quality}) => ({...quality}))
class AnalysisExceed extends React.Component {
  constructor(props) {
    super(props);

    let value;
    if ('defaultValue' in props) {
      value = 'TURBIDITY' || props.defaultValue;
    }
    let abstractOption = {};
    if ('defaultValue' in props) {
        abstractOption = props.defaultOption;
    }

    this.state = {
      value,
      abstractOption,
      time,
    };
    // 仅配合ec插件使用
    this.ec_time = time;
  }

  componentDidMount() {
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue){
      if (nextProps.defaultValue){
        this.setState({
          value: nextProps.defaultValue
        }, () => {
          this.init()
        })
      }
    }
  }

  init = async () => {
    await this.setDateECharts()
  }

  formatAbstractOption = (abstractOption) => {
    const chartColumns = {
        label: '水质检测情况分析',
        chart: {
          type: 'Common', dataSource: 'QualityIndicatorsAnalysisResource',
          columns: {
            seriesItems: [
              { name: '超标次数', field: 'value', type: 'bar' },
              { name: '合格率', field: 'radio', type: 'line', yAxisIndex: 1 },
            ],
            xAxis: { field: 'time', format: 'M月', formatStr: 'YYYYMM' },
            yAxis: [{ name: '次' }, { name: '%'}],
          },
          color: ['78, 203, 115', '251, 212, 55'],
          other: { showLegend: true },
        },
        server: { type: 'quality/queryQualityIndicatorsAnalysis', payload: {}},
      };
    //   {
    //     key: 'cbqk',
    //     label: '超标情况占比分析',
    //     chart: {
    //       type: 'Pie', dataSource: 'ExceedingStandardAnalysisResource',
    //       other: { radius: ['0%', '60%'] },
    //       columns: { name: '', field: [{name: 'label', value: 'value'}] }
    //     },
    //     server: { type: 'quality/queryExceedingStandardAnalysis', payload: {}},
    //   }
    return chartColumns;
  }

  // 图表
  setDateECharts = () => {
    const { props, state } = this;
    const chartColumns = this.formatAbstractOption(state.abstractOption)
    const { server } = chartColumns;
    if(server) this.queryECharts(server);
  }
  // 处理echarts配置请求
  queryECharts = async (server) => {
    const { time, value } = this.state;
    let { payload } = server;

    Object.assign(payload, {
      time,
      field: value
    })
    Object.assign(server, { payload })
    await this.props.dispatch(server);
  }

// 图表渲染
RenderECharts = () => {
    const { props, state } = this;
    const chartColumns = this.formatAbstractOption(state.abstractOption)

    const { chart, extra } = chartColumns;
    const { type: chartType, dataSource, columns, color, other } = chart;
    return (
        <Chart
        type={chartType}
        color={color}
        columns={columns}
        dataSource={props[dataSource]}
        extra = {extra}
        other = {other}
        />
    )
  }

  // 下拉选择 change
  handleChange =(value) =>{
    const { abstractList } = this.props;
    const { value: lastValue } = this.state;

    if (value  !== lastValue ) {
      const abstractOption = Tools.columnsList(abstractList, value);
      this.setState({
        value,
        abstractOption,
      }, async () => {
        await this.init()
      })
    }
  }
// 选择时间
handleCalendarChange = (dateRange) => {
    const time = moment(dateRange[0]).format(format)
    this.setState({
      time,
    }, async () => {
      await this.init()
    })
  }
  // 
  timeChange = obj => {
    const { startTime, endTime } = obj;
    this.ec_time = [startTime, endTime];
  };
  onModalCancel = () =>{
    this.setState({
      modalVis: false
    }, ()=>{
      this.handleCalendarChange(this.ec_time)
    })
  };
  cardChange = () => {
    this.setState({ modalVis: true })
  }

  render() {
      const { props, state } = this;
    const { time, value, abstractOption } = state;
    const { abstractList } = props;

    const startTime = moment(time)
    const endTime = moment(time)

    const chartColumns = this.formatAbstractOption(abstractOption)
    const { chart, extra } = chartColumns;
    const { type: chartType, dataSource, columns, color, other } = chart;

    return (
      <div>
        <CustomSelect
            columns={abstractList}
            defaultValue={value}
            onChange={this.handleChange}
        />
        <br/><br/>
    <div onClick={this.cardChange.bind(this)}>点击</div>
    <Modal
        title="选择日期"
        visible={this.state.modalVis}
        onCancel={this.onModalCancel}
        footer={null}
        width={600}
      >
        <SelectTime2
        selectOptions={['年']}
          onChange={this.timeChange}
          defaultValue={
                { timeUnit, startTime, endTime }
            }
        />
      </Modal>
      <Chart
        type={chartType}
        color={color}
        columns={columns}
        dataSource={props[dataSource]}
        extra = {extra}
        other = {other}
        />
      </div>
    )
  }
}

export default AnalysisExceed;
